<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="/api-ui/static/bootstrap/css/bootstrap.min.css" />
	<script type="text/javascript" src="/api-ui/static/easyui/jquery.min.js"></script>
	<script type="text/javascript" src="/api-ui/static/bootstrap/js/bootstrap.min.js"></script>
	<link rel="stylesheet" type="text/css" href="/api-ui/static/css/common/box.css" />
	<link rel="stylesheet" type="text/css" href="/api-ui/static/css/common/checkbox.css" />
	<link href="/api-ui/static/css/common/checkbox.css" rel="stylesheet" />
	<!--vue脚本库-->
	<script type="text/javascript"
			src="/api-ui/static/js/vue/vue-3.2.4.global.js">
	</script>
	<!--axios脚本库-->
	<script type="text/javascript"
			src="/api-ui/static/js/vue/axios-0.18.0.min.js">
	</script>
	<!--我们自己封装的axios函数库 -->
	<script type="text/javascript"
			src="/api-ui/static/js/vue/axios-helper.js">
	</script>
	<style type="text/css">
		/* .{
                    width:1100px;

                    } */
		a {
			color: black;
		}

		a:hover {
			text-decoration: none;
		}

		.box-body {
			cursor: pointer;
		}

		.table {
			padding: 0 0 0 0 !important;
		}

		.table tr {
			background-color: white !important;
			border-bottom: 1px solid dashed !important;
		}

		.table .table-header {
			border-bottom: 1px solid dashed !important;
		}

		.box-header b:hover {
			background-color: #E7E7E7;
		}

		.box-header a {
			padding: 5px;
		}

		.box-body {
			padding: 0 0 0 0 !important;
		}

		.active {
			color: #000000;
		}

		.box-body .table-header .status {
			color: #72afd2;
		}

		.box-body  .table-header  .type {
			color: #72afd2;
		}

		.box-body .table-header span {
			width: 2px !important;
			height: 2px !important;
		}

		th .paixu:HOVER{
			color:blue;
		}

		.box {
			margin-top: 10px !important;
		}
	</style>
	<!-- <script>
    $(function(){
        if($(".paixu").children().length==0){
            //如果该元素下面没有span就是那个上下箭头
            $(".paixu").css("color","blue");
        }
    })
    </script> -->
</head>

<body style="background-color: #ecf0f5;" id="app">
<div class="row" style="padding-top:10px">
	<div class="col-md-2">
		<h1 style="font-size: 24px; margin: 0;" class="">考勤列表</h1>
	</div>
	<div class="col-md-10 text-right">
		<a href="##"><span class="glyphicon glyphicon-home"></span> 首页</a> >
		<a disabled="disabled">考勤列表</a>
	</div>
</div>

<div class="row">
	<div class="col-md-12 thistable">
		<div class="bgc-w box box-primary">
			<div class="box-header" style="padding-bottom: 20px">
				<a class="label label-success" href=""><span
						class="glyphicon glyphicon-refresh"></span>  刷新 </a>
				<div class="input-group" style="width:150px;float:right;top:-5px">
					<input type="text" class="form-control input-sm pull-right baseKey" value="" placeholder="查找..." v-model="userName"/>
					<div class="input-group-btn" style="top:-1px;">
						<a class="btn btn-sm btn-default glyphicon glyphicon-search btn-change " @click="lookFor"></a>
					</div>
				</div>

			</div>
			<div class="box-body">
				<div class="table" style="padding-top: 15px;">
					<div class="">
						<table class="table table-hover table-striped">
							<tr class="table-header">
								<th scope="col" class="paixu thistype">类型
								</th>
								<th scope="col"><span class="paixu thistime">时间
						</span></th>
								<th scope="col">ip</th>
								<th scope="col">备注</th>
								<th scope="col"><span class="paixu thisstatus">状态
						</span></th>
							</tr>
							<tr v-for="obj in AoaAttachmentList">
								<td><span v-if="obj.typeId==1">
<!--                                     "" :  obj.typeId ==3 ? ""-->
											上班
									</span>
									<span v-else-if="obj.typeId==2">
                                        下班
                                    </span>
									<span v-else-if="obj.typeId==3">
                                        请假
                                    </span>
									<span v-else-if="obj.typeId==4">
                                        出差
                                    </span>
								</td>

								<td><span>
									{{obj.uploadTime}}
									</span>
								</td>
								<td><span>
									192.168.1.4
									</span></td>
								<td>
									{{obj.attendsRemark}}
								</td>
								<td>
									<span class="label label-success" v-if="obj.typeId==1">正常</span>
									<span class="label label-warning" v-else-if="obj.typeId==2">早退</span>
									<span class="label label-danger" v-else>迟到</span>
								</td>
							</tr>
						</table>
					</div>
				</div>
			</div>



			<div class="box-footer no-padding" style="margin-top: -20px;">
				<div style="padding: 5px;">
					<div id="page"
						 style="background: #fff; border: 0px; margin-top: 0px; padding: 2px; height: 25px;">
						<div style="width: 40%; float: left;">
							<div class="pageInfo" style="margin-left: 5px;">
								共<span>{{total}}</span>条 | 每页<span>{{size}}</span>条
								| 共<span>{{pages}}</span>页
							</div>
						</div>
						<div style="width: 60%; float: left;">
							<div class="pageOperation">
								<!--判断是否是第一页  -->
								<a class="btn btn-sm btn-default no-padding tablefirst"  style="width: 30px; height: 20px;"  @click="first"> <span
										class="glyphicon glyphicon-backward"></span></a>
								<a class="btn btn-sm btn-default no-padding tableup"  style="width: 30px; height: 20px;" @click="up" > <span
										class="glyphicon glyphicon-triangle-left"></span></a>
								<a disabled="disabled" class="btn btn-default no-padding" style="width: 30px; height: 20px;">
									{{current}}
								</a>
								<!--判断是否是最后一页  -->
								<a class="btn btn-sm btn-default no-padding tabledown"   style="width: 30px; height: 20px;" @click="next"> <span
										class="glyphicon glyphicon-triangle-right"></span></a>
								<a class="btn btn-sm btn-default no-padding tablelast"  style="width: 30px; height: 20px;"  @click="last()"> <span
										class="glyphicon glyphicon-forward"></span></a>
							</div>
						</div>
					</div>
				</div>
			</div>
			<script>
				/* 分页插件按钮的点击事件 */
				/* url是从后台接收过来的链接，sort是记录排序规则 */
				$('.tablefirst').on('click',function(){
					if(true==false){
						$('.thistable').load('attendcelisttable?page=0');
					}
				});
				$('.tableup').on('click',function(){
					if(true==false){
						$('.thistable').load('attendcelisttable?page=-1');
					}
				});
				$('.tabledown').on('click',function(){
					if(true==false){
						$('.thistable').load('attendcelisttable?page=1');
					}
				});
				$('.tablelast').on('click',function(){
					if(true==false){
						$('.thistable').load('attendcelisttable?page=0');
					}

				});

				/*类型、状态、时间的排序  */
				$('.thistype').on('click', function() {
					if ($(this).children().hasClass('glyphicon-triangle-bottom')) {
						$('.thistable').load('attendcelisttable?type=0&icon=glyphicon-triangle-top');
					} else {
						$('.thistable').load('attendcelisttable?type=1&icon=glyphicon-triangle-bottom');
					}
				});
				$('.thisstatus').on('click', function() {
					if ($(this).children().hasClass('glyphicon-triangle-bottom')) {
						$('.thistable').load('attendcelisttable?status=0&icon=glyphicon-triangle-top');
					} else {
						$('.thistable').load('attendcelisttable?status=1&icon=glyphicon-triangle-bottom');
					}
				});
				$('.thistime').on('click', function() {
					if ($(this).children().hasClass('glyphicon-triangle-bottom')) {
						$('.thistable').load('attendcelisttable?time=0&icon=glyphicon-triangle-top');
					} else {
						$('.thistable').load('attendcelisttable?time=1&icon=glyphicon-triangle-bottom');
					}
				});
				$('.thisvisit').on('click', function() {
					if ($(this).children().hasClass('glyphicon-triangle-bottom')) {
						$('.thistable').load('attendcelisttable?visitnum=0&icon=glyphicon-triangle-top');
					} else {
						$('.thistable').load('attendcelisttable?visitnum=1&icon=glyphicon-triangle-bottom');
					}
				});
				/* 查找 */
				$('.baseKetsubmit').on('click', function() {
					var baseKey = $('.baseKey').val();
					console.log(baseKey);
					$('.thistable').load('attendcelisttable?baseKey='+baseKey+'');
				});
			</script>
		</div>		</div>
</div>
</body>
<script>
	Vue.createApp({
		data(){
			return {
				//用户模糊查询
				userName:null,
				AoaAttachmentList: [],

				//总页数
				pages:null,
				//总数据
				total:null,
				//每页数据
				size:null,
				//页数
				current:1,

				page:{
					size : 5,
					current : 1,
				}

			}
		},
		methods:{
			lookFor(){
				if(this.userName ==null || this.userName=="") {
					alert("查询条件不能为空，否则查询全部呢");
					this.loadList();
				}else {
					requestGet("/api-core/aoaAttachmentList/queryList",{
						page:this.page,
						userName:this.userName
					}).then((resp) => {
						console.info("resp",resp)
						this.AoaAttachmentList = resp.records;
						this.pages=resp.pages;
						this.total=resp.total;
						this.size=resp.size;
					})
				}
			},
			//第一页
			first(){
				this.page.current=1;
				this.current=1;
				this.loadList();
			},
			//最后一页
			last(){
				this.page.current=this.pages;
				this.current=this.pages;
				this.loadList();
			},
			//上一页
			up(){
				let ye=this.current;
				if(ye== 1){
					alert("人家到最前面了")
					return;
				}
				ye=ye-1< 1 ? 1: (ye-1);
				//将当前页码数赋值到模型层
				this.current=ye;
				this.page.current=ye;
				this.loadList();
			},
			//下一页
			next(){
				let ye=this.current;
				if(ye== this.pages){
					alert("人家到底了")
					return ;
				}
				ye= ye > this.pages ? this.pages: (ye+1);
				//将当前页码数赋值到模型层

				this.current=ye;
				this.page.current=ye;
				this.loadList();
			},
			loadList(){
				requestGet("/api-core/aoaAttachmentList/queryList", this.page
				).then((resp) => {
					this.AoaAttachmentList = resp.records;
					this.pages=resp.pages;
					this.total=resp.total;
					this.size=resp.size;
					console.info("page",this.page)
					console.info("current",this.current)
				})
			}
		},
		created(){
			this.loadList();
		}
	}).mount("#app");
</script>



</html>